<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM事件流的三个阶段</title>
    <style>
        .father{
            margin: auto;
            width: 400px;
            height: 400px;
            background-color: darkkhaki;
        }
        .son{
            margin:  auto;
            text-align: center;

            width: 300px;
            height: 300px;
            line-height: 300px;
            background-color: rgb(85, 141, 74);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //DOM事件流的三个阶段
        //1.JS代码中只能执行捕获或者是冒泡其中的一个阶段
        // 2.onclick和attachEvent（ie）只能得到冒泡阶段
        // //3.捕获阶段 如果addEventListerner 第三个参数是true 那么则处于捕获阶段 document-》 html1 =》body=》 father =》 son=>
        // let son = document.querySelector('.son')
        // son.addEventListener('click',function(){
        //     alert('son盒子')
        // },true)
        // let father = document.querySelector('.father')
        // father.addEventListener('click',function(){
        //     alert('father盒子')
        // },false)
        //4.冒泡阶段 如果addEventListerner 第三个参数是false 或者省略 那么则处于冒泡阶段 son-> father-> body-> html-> document
        let son = document.querySelector('.son')
        son.addEventListener('click',function(){
            alert('son盒子')
        },false)
        let father = document.querySelector('.father')
        father.addEventListener('click',function(){
            alert('father盒子')
        },false)
        document.addEventListener('click',function(){
            alert('document')
        },false)
        // box.onclick = function(event){}
// event就是一个事件对象写到侦听函数的小括号里面当形参来看
// 事件对象只有有了对象才会存在，他是系统自动创建的不需要传递参数
// 事件对象就是一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标，如果是键盘事件里面就包含了键盘事件的信息，比如判断用户按下了哪个键

// box.addEventListener('click',function(event){
// console.log(event)
// // 返回的就是该时间相关的事件
// })
// 事件对象可以自己命名 event， evt, e
// 这个对象有兼容性ie6,7,通过window.event兼容性的写法 
// e = e || window.event如果识别就会返回前面的 如果不识别就会返回false 执行后面的、
    </script>
</body>
</html>